<script setup lang="ts">
import { reactive } from 'vue'
import { Form, FormItem, Input, Select, SelectOption } from 'ant-design-vue'
import type { RuleObject } from 'ant-design-vue/es/form';
import { handleForm } from '@/utils/alert'
import { emptyFilter } from '@/utils/common'

type ComEmits = {
  submit: [params: PaginateQuery<IOrder>];
}

const emit = defineEmits<ComEmits>()

const formState = reactive<PaginateQuery<IOrder & {}>>({
  order_num: '',
  order_status: '',
  sj_status: -1,
  after_sale_status: -1,
  shop_name: ''
})
const formRules = reactive<PartialRecord<typeof formState, RuleObject[]>>({
  order_num: [],
  order_status: [],
  sj_status: [],
  after_sale_status: [],
  shop_name: []
})
const { validate, validateInfos, resetFields } = Form.useForm(formState, formRules)

const onSubmit = async () => {
  const res = await validate().catch(handleForm)
  if (res) {
    emit('submit', emptyFilter(res, [-1]))
  }
}
const onReset = () => {
  resetFields()
}

defineExpose<{
  setFields: {
    (key: keyof typeof formState, value: any): void
  }
  getValues: {
    (): typeof formState
  }
}>({
  setFields: (key: keyof typeof formState, value: any) => {
    formState[key] = value
  },
  getValues: () => emptyFilter(formState, [-1])
})

</script>


<template>
  <Form layout="inline" autocomplete="off" :model="formState" class="space-y-2" @finish="onSubmit">
    <FormItem label="店铺名称" v-bind="validateInfos.shop_name" class="mt-2">
      <Input v-model:value="formState.shop_name"></Input>
    </FormItem>

    <FormItem label="订单号" v-bind="validateInfos.order_num">
      <Input v-model:value="formState.order_num"></Input>
    </FormItem>

    <FormItem label="订单状态" v-bind="validateInfos.order_status">
      <Select v-model:value="formState.order_status">
<!--        <SelectOption :value="-1">全部</SelectOption>-->
<!--        <SelectOption :value="2">备货中</SelectOption>-->
<!--        <SelectOption :value="101">部分发货</SelectOption>-->
<!--        <SelectOption :value="3">已发货</SelectOption>-->
<!--        <SelectOption :value="4">已取消</SelectOption>-->
<!--        <SelectOption :value="5">已完成</SelectOption>-->
        <SelectOption :value="0">未知状态</SelectOption>
        <SelectOption :value="10">待付款</SelectOption>
        <SelectOption :value="30">已付款</SelectOption>
        <SelectOption :value="40">已发货</SelectOption>
        <SelectOption :value="50">已签收</SelectOption>
        <SelectOption :value="70">订单成功</SelectOption>
        <SelectOption :value="80">订单失败</SelectOption>
      </Select>
    </FormItem>

    <FormItem label="商家订单状态" v-bind="validateInfos.sj_status">
      <Select v-model:value="formState.sj_status">
        <SelectOption :value="-1">全部</SelectOption>
        <SelectOption :value="10">待付款</SelectOption>
        <SelectOption :value="11">用户关闭</SelectOption>
        <SelectOption :value="12">支付超时</SelectOption>
        <SelectOption :value="20">待发货</SelectOption>
        <SelectOption :value="30">已发货</SelectOption>
        <SelectOption :value="40">已完成</SelectOption>
        <SelectOption :value="50">已退款</SelectOption>
      </Select>
    </FormItem>

    <!--<FormItem label="售后状态" v-bind="validateInfos.after_sale_status">-->
    <!--  <Select v-model:value="formState.after_sale_status">-->
    <!--    <SelectOption :value="-1">全部</SelectOption>-->
    <!--    <SelectOption :value="0">未发起</SelectOption>-->
    <!--    <SelectOption :value="10">申请退款</SelectOption>-->
    <!--    <SelectOption :value="11">支付超时</SelectOption>-->
    <!--    <SelectOption :value="12">待发货</SelectOption>-->
    <!--    <SelectOption :value="13">已发货</SelectOption>-->
    <!--    <SelectOption :value="14">已完成</SelectOption>-->
    <!--    <SelectOption :value="15">聚水潭已确认收货待平台退款</SelectOption>-->
    <!--    <SelectOption :value="20">拒绝退款</SelectOption>-->
    <!--    <SelectOption :value="21">拒绝退货退款</SelectOption>-->
    <!--    <SelectOption :value="30">售后完成</SelectOption>-->
    <!--  </Select>-->
    <!--</FormItem>-->

    <div class="flex justify-end w-full space-x-2 py-2">
      <AButton type="primary" html-type="submit">搜索</AButton>
      <AButton @click="onReset" danger>重置</AButton>
    </div>
  </Form>
</template>